<template>
	<view class="container">
		<view class="bj">
			<image class="invite_bj" src="@/static/images/home/invite_img.png" mode=""></image>
		</view>
		<view class="c_cards">
			<view class="c_card">
				<view class="header">
					<image class="invite_hbj" src="@/static/images/home/invite_hbj.png" mode=""></image>
					<view class="h_content">
						<image class="bj_text" src="@/static/images/home/bj_text.png" mode=""></image>
						<view class="tip_text">R$ 20,00 de saldo por cada amigo</view>
						<view class="tip_title">indicdo</view>
					</view>
					<view class="text1">Indique um amigo e ganhe dinheiro</view>
					<view class="text2">Ganhe R$ 20,00 de saldo por cada amigo que voce indicar.</view>
				</view>
				<view class="main">
					<view class="text3">Para efetivar seu bônus, o primeiro depósito de seu amigo deve ser no mínimo de R$ 30,00</view>

					<view class="inputs">
						<view class="input_name">Seu link:</view>
						<up-input placeholder="https://" border="none" v-model="link" :customStyle="inputStyle" color="#fff">
							<template #prefix>
								<view class="unit">
									<image class="fin_icon" src="@/static/images/home/link.png" mode=""></image>
								</view>
							</template>
						</up-input>
					</view>
					<view class="link_btn">
						<up-button color="#10AD6B" :customStyle="btnStyle" @click="clickBtn">
							<image class="btn_icon" src="@/static/images/home/cope.png" mode=""></image>
							<view class="btn_text">Copiar Link</view>
						</up-button>
					</view>
					<view class="cards">
						<view class="card_i">
							<view class="i_title">A receber</view>
							<view class="i_text">R$ 0,00</view>
						</view>
						<view class="card_i">
							<view class="i_title">Indicados</view>
							<view class="i_text2">00</view>
						</view>
					</view>
					<view class="text4">Solicite o acesso</view>
					<view class="text5">Nossa plataforma dispõe de um painel de afiliados avançado. Além disso, oferece a capacidade de adicionar subafiliados.</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref, reactive, onMounted, watch } from 'vue';
import { onLoad, onShow } from '@dcloudio/uni-app';

const link = ref('https://pandapix.bet/?ref=SGHHJKQWKE');

const inputStyle = {
	height: '88rpx',
	borderRadius: '12rpx',
	background: '#242632',
	padding: '0 12rpx'
};
const btnStyle = {
	height: '88rpx',
	borderRadius: '12rpx',
	fontSize: '32rpx',
	color: '#fff',
	fontWeight: 700
};

onMounted(() => {});

const clickBtn = () => {
	console.log(123);
};
</script>

<style lang="scss" scoped>
.container {
	background-color: #19191f;
	width: 100vw;
	box-sizing: border-box;
	position: relative;
	.bj {
		position: absolute;
		width: 100%;
		height: 640rpx;
		padding: 0 32rpx;
		top: 48rpx;
		left: 0;
		box-sizing: border-box;
		.invite_bj {
			width: 100%;
			height: 100%;
			display: block;
		}
	}

	.c_cards {
		position: absolute;
		top: 180rpx;
		left: 0;
		margin: 0 32rpx;
		box-sizing: border-box;
	}
	.c_card {
		border-radius: 20rpx;
		border: 4rpx solid rgba(102, 229, 155, 0.3);
		box-shadow: 0rpx 0rpx 20rpx 2rpx rgba(47, 208, 128, 0.3);
		padding-bottom: 50rpx;
		margin-bottom: 66rpx;

		.header {
			width: 100%;
			position: relative;
			.invite_hbj {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				z-index: 1;
			}
			.h_content {
				position: relative;
				z-index: 2;
				height: 460rpx;
				width: 100%;
				display: flex;
				flex-direction: column;
				align-items: end;
				justify-content: center;
				padding: 0 60rpx;
				box-sizing: border-box;
				.bj_text {
					height: 158rpx;
					width: 478rpx;
					display: block;
				}
				.tip_text {
					margin: 24rpx 0;
				}
			}
			.text1 {
				padding: 0 32rpx;
				box-sizing: border-box;
				margin-top: 46rpx;
				font-size: 44rpx;
				line-height: 64rpx;
				color: #38aa6f;
				font-weight: 700;
			}
			.text2 {
				padding: 0 32rpx;
				box-sizing: border-box;
				margin-top: 10rpx;
				font-size: 32rpx;
				line-height: 64rpx;
				font-weight: 700;
				margin-bottom: 10rpx;
			}
		}
		.main {
			padding: 0 32rpx;
			box-sizing: border-box;
			.text3 {
				font-size: 28rpx;
				line-height: 64rpx;
				font-weight: 700;
				color: #ff9b00;
				padding-bottom: 20rpx;
				border-bottom: 1rpx solid rgba(216, 216, 216, 0.05);
			}
			.inputs {
				margin-top: 20rpx;
				.input_name {
					font-size: 28rpx;
					line-height: 64rpx;
					font-weight: 700;
					margin-bottom: 20rpx;
				}
				.unit {
					margin-right: 12rpx;
					.fin_icon {
						width: 48rpx;
						height: 48rpx;
						display: block;
					}
				}
			}
			.link_btn {
				margin-top: 40rpx;
				width: 100%;
				box-sizing: border-box;
				.btn_icon {
					width: 48rpx;
					height: 48rpx;
					display: block;
					margin-right: 15rpx;
				}
			}
			.cards {
				margin-top: 40rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				.card_i {
					width: 290rpx;
					height: 220rpx;
					border-radius: 12rpx;
					background: #242631;
					box-sizing: border-box;
					border: 2rpx solid #454757;
					display: flex;
					align-items: center;
					justify-content: center;
					flex-direction: column;
					.i_title {
						font-size: 24rpx;
						line-height: 64rpx;
						font-weight: 900;
					}
					.i_text {
						font-size: 48rpx;
						line-height: 64rpx;
						color: #89e2a1;
						font-weight: bolder;
					}
					.i_text2 {
						font-size: 48rpx;
						line-height: 64rpx;
						font-weight: bolder;
						color: #fff;
					}
				}
			}
			.text4 {
				margin-top: 10rpx;
				font-size: 32rpx;
				line-height: 64rpx;
				font-weight: bold;
			}
			.text5 {
				margin-top: 20rpx;
				font-size: 28rpx;
				line-height: 48rpx;
				font-weight: bold;
				color: #7e84a0;
			}
		}
	}
}
</style>
